<script setup>
    import Add from './components/Add.vue';
    import Sub from './components/Sub.vue';
    import {ref} from "vue";
    // pinia导入
    import { useStockStore } from '@/store/stock';
    const stock = useStockStore()
    
    // 由于监听的是原生事件，因此可以获取到DOM元素
    const assigDemo = (e) => {
      const value = e.target.value
      console.log(e)
      // 1.校验数据
      if(!value) {
        alert("库存不能为空！")
      }
      // 2.修改
      stock.assignment(value)
      // 3.置空
      e.target.value = ''
    }
</script>

<template>
  <h1>根组件</h1>
  <p>
    库存总数：<input type="number"
    @keydown.enter="assigDemo($event)">
  </p>
  <p>库存翻倍为：{{ stock.doubleStockCount }}</p>
  <hr>
  <Add />
  <hr>
  <Sub />
</template>

<style>
  * {
    box-sizing: border-box;
  }
  #app {
    width: 500px;
    padding: 5px 10px;
    margin: 50px auto;
    
    border: 1px #ccc solid;
    background-color: #eee;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
  }
</style>